<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距？所有元素都具备边框，边框以外的距离，四个方向，上下，左右【微小的偏移】
			外边距问题1：行内元素：a,i,delete,只支持左右边距
			            布局，只支持左右推动效果
						解决方案：行转块！
			常用margin属性：两个属性值; margin：0 auto; 居中			
		 */
		h1{
			width: 50%;
			border: 1px solid red;
			/*margin外边距属性：1个属性值 上 右 下 左*/
			margin: 300px;
			/* margin外边距属性：2个属性值  上下   左右*/
			margin: 100px 200px;
			/* margin外边距属性：3个属性值 上  右左   下*/
			margin: 100px 200px 300px;
			/* margin外边距属性：3个属性值 上  右  下   左 */ 
			margin: 100px 200px 300px 400px;
			/* 常用元素：自适应居中  margin：0 auto */
			margin: auto;
	        margin-left: 100px;
		}
		/* 外边距问题2：外边距合并问题: 上下元素都存在外边距，垂直以最大外边距值为主
		外边距垂直合并：最大外边距为主，怎么解决？
		推荐：1.margin设置1个值，上下会垂直，去掉一个上下元素中上，下外边距任一个，重新计算（两个元素加）
		*/
		#parent{
			margin-top: 30px;
			width: 200px;
			height: 200px;
			background: aquamarine;
			/* 父元素：border：1px solid transparent */
			border:1px solid transparent ;
			/* 父元素：overflow：hidden;创建新块级上下文，阻止外边距合并 */
			overflow:hidden;
			
		}
		#child{
			margin-top: 30px;
			width: 100px;
			height: 100px;
			background: #55aaff;
		}
		</style>
	</head>
	<body>
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		
		
		<hr />
		<!-- 元素：存在于框模型中=外边距+边框+内容
		有些元素默认存在外边距？，处理方案：通配选择器，去掉元素外边框
		-->
		<span>行内元素</span>
		<h1>块元素</h1>
		
		<ul></ul>
		<li></li>   <!-- 一个黑点 -->
		<form action=""></form>
		<input type="text" />  <!-- 文本框 -->
		<table>
			<tr>
				<td></td>
			</tr>
		</table>
		<p></p>
	</body>
</html>
<!-- 测试元素是否存在外边距  ？ 
      ul li             √
	  form inout        ×
	  table  tr  td     ×
	  p                 √
	  *{margin}

-->